<template>
  <div class="about">
    <!-- pc端 -->
    <div class="in-about" v-show="flag">
      <div class="tops">
        <el-form
          @submit.native.prevent
          ref="ruleFormRef"
          :model="ruleForm"
          style="display: flex"
        >
          <el-form-item prop="name">
            <el-input
              @keyup.enter.prevent="getList()"
              v-model="ruleForm.name"
              style="width: 200px; height: 40px; margin-right: 10px"
              placeholder="客户名称"
            />
          </el-form-item>
        </el-form>
        <el-button type="primary" style="height: 40px" @click="getList()"
          >查询</el-button
        >
      </div>
      <el-card class="box-card" v-loading="loading" style="position: relative">
        <el-table
          :data="cardData"
          v-loading="loading"
          stripe
          style="width: 100%; max-height: 520px; height: 500px"
        >
          <el-table-column prop="accountName" label="客户" width="400" />
          <el-table-column>
            <template #default="scope">
              <el-button type="primary" @click="Confirm(scope.row)"
                >确认</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- <div v-for="(item, index) in cardData" :key="item.id" class="text item">
          <p class="ps">{{ item.sszz__c[0] }}</p>
          <p class="ps">{{ item.accountName }}</p>
          <el-button
            type="primary"
            style="margin-bottom: 10px"
            @click="Confirm(item)"
            >确认</el-button
          >
        </div>

        <div
          v-show="ti_show"
          style="
            position: absolute;
            left: 50%;
            top: 50%;
            font-size: 18px;
            transform: translate(-50%, -50%);
          "
        >
          暂无数据
        </div> -->
      </el-card>
    </div>
    <!-- 移动端 -->
    <div class="in-abouts" v-show="!flag">
      <div class="tops">
        <el-form ref="ruleFormRef" :inline="true" :model="ruleForm">
          <el-form-item prop="name">
            <el-input
              v-model="ruleForm.name"
              style="width: 200px; height: 40px; margin-right: 10px"
              placeholder="客户名称"
            />
          </el-form-item>
        </el-form>
        <el-button type="primary" style="height: 40px" @click.stop="getList()"
          >查询</el-button
        >
      </div>
      <el-card class="box-cards" style="position: relative">
        <el-table
          :data="getCurrentPageData"
          v-loading="loading"
          stripe
          style="width: 100%; max-height: 400px; height: 360px"
        >
          <el-table-column prop="accountName" label="客户" width="160" />
          <el-table-column>
            <template #default="scope">
              <el-button type="primary" @click="Confirm(scope.row)"
                >确认</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            size="small"
            :current-page="currentPage"
            :page-size="pageSize"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            layout="prev, pager, next"
            @change="sizeChange"
            :total="cardData.length"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>
<script setup>
import { ref, watch, computed, reactive, onMounted } from "vue";
import axios from "axios";
const ruleForm = reactive({
  name: "",
});
let isShow = ref(false);
const currentPage = ref(1);
const pageSize = ref(5);
let token = ref("");
let types = ref("");
let cardData = ref([]);

let flag = ref(true);
let ti_show = ref(false);
const loading = ref(false);
let browserRedirect = () => {
  var ua = navigator.userAgent.toLowerCase();
  var ipad = ua.match(/ipad/i) == "ipad";
  var iphone = ua.match(/iphone os/i) == "iphone os";

  var mid = ua.match(/midp/i) == "midp";

  //midp，即Mobile Internet Device pad，一种新的“比智能电话大，比笔记本小”的互联网终端。

  var uc7 = ua.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
  var uc = ua.match(/ucweb/i) == "ucweb";
  var android = ua.match(/android/i) == "android";
  var ce = ua.match(/windows ce/i) == "windows ce";
  var mobile = ua.match(/windows mobile/i) == "windows mobile";
  if (ipad || iphone || mid || uc7 || uc || android || ce || mobile) {
    //跳转移动端页面
    console.log("移动端");
    flag.value = false;
  } else {
    //跳转pc端页面
    console.log("pc端");
    flag.value = true;
  }
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  // console.log();
  
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1; // 切换每页行数时，返回第一页
};
// 获取当前页应显示的数据
const getCurrentPageData = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  const endIndex = currentPage.value * pageSize.value;
  return cardData.value.slice(startIndex, endIndex);
});
let Confirm = (i) => {
  console.log(i, "i");
  let tempData = {
    isvData: JSON.stringify(i),
    doClose: true,
  };
  window.top.postMessage(tempData, "*");
};
let getAccessTokenFromUrl = () => {
  let url = window.location.href;
  // 使用URLSearchParams对象解析查询字符串
  const urlParams = new URLSearchParams(url.split("?")[1]);
  const result = urlParams.get("access_token");
  return result.split("#")[0] ? result.split("#")[0] : null;
};
let getTitle = () => {
  let url = window.location.href;
  // 使用URLSearchParams对象解析查询字符串
  const urlParams = new URLSearchParams(url.split("?")[1]);
  const result = urlParams.get("title");
  return result.split("#")[0] ? result.split("#")[0] : null;
};
let getUrlToken = () => {
  let url = window.location.href;
  // 使用URLSearchParams对象解析查询字符串
  const urlParams = new URLSearchParams(url.split("?")[1]);
  const result = urlParams.get("access_token");
  return result.split("#")[0] ? result.split("#")[0] : null;
};
let getTypes = () => {
  let url = window.location.href;
  const urlParams = new URLSearchParams(url.split("?")[1]);
  const result = urlParams.get("type");
  return result.split("#")[0] ? result.split("#")[0] : null;
};
let sizeChange = (e) => {
  console.log(e, "e");
};
let getList = async (num = 1) => {
  if (ruleForm.name != "") {
    let startIndex = 0;
    let pageSize = 100;
    let accountName = ruleForm.name;

    let soql;

    let url;
    let headers;
    if (flag.value == true) {
      url = "https://api-tencent.xiaoshouyi.com/rest/data/v2.0/query/xoql";
      soql = `select accountName,id from account where accountName like '%${accountName}%' limit ${
        startIndex * pageSize
      },${pageSize * (startIndex + 1)} order by id desc`;
      headers = {
        "Content-Type": "application/x-www-form-urlencoded",
        Authorization: "Bearer " + token.value,
      };
    } else {
      // h5
      url = "https://api-tencent.xiaoshouyi.com/rest/data/v2.0/query/xoql";
      soql = `select accountName,id from account where accountName like '%${accountName}%' limit ${
        startIndex * pageSize
      },${pageSize * (startIndex + 1)} order by id desc`;
      headers = {
        "Content-Type": "application/x-www-form-urlencoded",
        Authorization: "Bearer " + token.value,
      };
    }
    let data = {
      xoql: soql,
    };
    console.log(headers, "headers");
    axios({
      method: "post",
      url,
      data,
      headers,
    })
      .then((res) => {
        console.log(res, "res");

        if (res.data.code == 200) {
          let data = res.data.data;
          console.log(data, "data");
          loading.value = true;

          cardData.value = res.data.data.records;

          if (cardData.value.length > 0) {
            console.log("有数据");
            loading.value = false;
          } else {
            console.log("没有数据");
            loading.value = false;
            alert("查无该数据请重试~");
          }
        }
      })
      .catch((err) => {
        console.log(err, "err");
        loading.value = false;
      });
  }
};

// 德美项目立项！！！！

browserRedirect();
let getTokens = () => {
  if (flag.value == true) {
    console.log(getUrlToken(), "web端");
    token.value = getUrlToken();
  } else {
    console.log(getAccessTokenFromUrl(), "移动端");
    token.value = getAccessTokenFromUrl();
    let title = getTitle();
    if (title && title != "undefined") {
      ruleForm.name = title;
    }
    console.log(ruleForm.name, "name");
    if (ruleForm.name && ruleForm.name != "undefined") {
      getList();
    }
  }
};

onMounted(() => {
  console.log(window.location.href, "url");
  getTokens();
});
</script>
<style>
.about {
  width: 100%;
  height: 100%;
}
.in-about {
  width: 1000px;
}
.in-about .tops {
  display: flex;
  justify-content: flex;
  margin-bottom: 10px;
}
.in-abouts {
  padding: 10px;
}
.in-abouts .tops {
  display: flex;
}
.el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: auto;
}
.box-card {
  height: 520px;
  /* height: 100%; */
}
.box-cards {
  min-height: 570px;
  height: 100%;
}
.pagination {
  text-align: center;
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.text .ps {
  font-size: 16px;
  line-height: 20px;
}
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
